<% include blocks/header %>
<% if(screen){screen=screen.toLowerCase()} %>
<div class="shinobi-bg display-table" style="height:100%">
<div class="shinobi-bg-shade">
<div class="container">
    	<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<div class="panel panel-login">
					<div class="panel-heading">
                        <div class="panel-heading-shade">
                            <div class="row">
                                <div class="col-xs-12">
                                    <a href="http://shinobi.video" target="_blank">
                                        <img src="/libs/img/icon/apple-touch-icon-76x76.png" style="border-radius:50%">
                                    </a>
                                </div>
                            </div>
						</div>
					</div>
					<div class="panel-body">
						<div class="row">
							<div class="col-lg-12">
								<form id="login-form" method="post" style="display: block;">
                                    <input type="hidden" name="machineID" id="machineID" value="">
									<div class="form-group">
										<input type="text" name="mail" id="email" tabindex="1" class="monospace form-control" placeholder="Email" value="">
									</div>
									<div class="form-group">
										<input type="password" name="pass" id="pass" tabindex="2" class="monospace form-control" placeholder="Password">
									</div>
									<div class="form-group f_i_input f_i_ldap" style="display:none">
										<input name="key" id="key" tabindex="2" class="monospace form-control" placeholder="Group Key">
									</div>
									<div class="form-group">
									<div class="row">
                                        <div class="col-md-12 monospace" style="width:calc(100% - 48px)">
                                            <select class="form-control" name="function" selector="f_i">
                                                <% switch(screen){
                                                    case'super': %>
                                                <option value="super"><%- lang.Superuser %></option>
                                                <% break;
                                                    case'admin': %>
                                                <option value="admin"><%- lang.Admin %></option>
                                                <% break;
                                                    default: %>
                                                <option value="dash" selected><%- lang.Dashboard %></option>
                                                <% if(config.productType==='Pro'){ %>
                                                <option value="ldap"><%- lang.LDAP %></option>
                                                <% } %>
                                                <option value="streamer"><%- lang.Streamer %></option>
                                                <option value="cam"><%- lang.Dashcam %> (<%- lang.Streamer %> v2)</option>
                                                <% break;
                                                } %>
                                            </select>
                                        </div>
                                        <div class="text-right" title="<%- lang['Remember Me'] %>" style="display:inline-block">
                                            <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="remember_me">
                                              <input type="checkbox" id="remember_me" value="1" name="remember" class="mdl-switch__input">
                                                <span class="monospace mdl-switch__label"></span>
                                            </label>
                                        </div>
									</div>
									</div>
                                    <div class="form-group" style="margin:20px"></div>
									<div class="form-group">
                                        <button type="submit" name="login-submit" id="login-submit" tabindex="4" class="btn btn-success btn-block"><%- lang.Login %></button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<script src="/libs/js/material.min.js"></script>
<script>
    <% var failedLogin;if(failedLogin===true){ %>
        localStorage.removeItem('ShinobiLogin_'+location.host)
    <% } %>
    $.ccio={f:$('#login-form'),ls:localStorage.getItem('ShinobiLogin_'+location.host),auth:localStorage.getItem('ShinobiAuth_'+location.host)}
    $.ccio.gid=function(x){
        if(!x){x=10};var t = "";var p = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        for( var i=0; i < x; i++ )
            t += p.charAt(Math.floor(Math.random() * p.length));
        return t;
    };
    if(!$.ccio.auth||$.ccio.auth===''){
        $.ccio.auth=$.ccio.gid(20)
        localStorage.setItem('ShinobiAuth_'+location.host,$.ccio.auth)
    }
    $(document).ready(function(){
        $('#machineID').val($.ccio.auth)
    })
    $.ccio.f.submit(function(e){
        $('input').css('border-color','')
        e.e=$(this),e.s=e.e.serializeObject(),e.inputs=e.e.find('input,button');
        if(e.s.remember){
            localStorage.setItem('ShinobiLogin_'+location.host,JSON.stringify({mail:e.s.mail,pass:e.s.pass,function:e.s.function}))
        }else{localStorage.removeItem('ShinobiLogin_'+location.host)}
    })
    if($.ccio.ls){
        $.ccio.ls=JSON.parse($.ccio.ls);
        $.each($.ccio.ls,function(n,v){
            n=$.ccio.f.find('[name="'+n+'"]')
            if(n.attr('type')==='checkbox'){
                n.prop('checked',true)
            }else{
                n.val(v)
            }
        });
        $.ccio.f.find('[name="remember"]').prop('checked',true);
        $.ccio.f.submit()
    }
    $('[name="function"]').change(function(){
        e={};
        e.removeClass='btn-danger btn-primary btn-success btn-warning'
        switch($(this).val()){
            case'streamer':
                e.addClass='btn-warning'
            break;
            case'admin':
                e.addClass='btn-primary'
            break;
            case'super':
                e.addClass='btn-danger'
            break;
            default:
                e.addClass='btn-success'
            break;
        }
        $('#login-submit').removeClass(e.removeClass).addClass(e.addClass)
    })
$('[selector]').change(function(e){
    e.v=$(this).val();e.a=$(this).attr('selector')
    $('.'+e.a+'_input').hide()
    $('.'+e.a+'_'+e.v).show();
    $('.'+e.a+'_text').text($(this).find('option:selected').text())
}).change();
</script>
